<template>
    <div class="questionnaire">
        <div class="img">
            <div class="edit" v-if="!inRecycleBin && !isStatistics">
                <router-link class="edit-btn" title="编辑" :to="{ path: '/create', query: {index: this.index}}"
                    @click="getIndex">
                    <img :src="editImg" alt="" @mouseover="changeEdit" @mouseleave="backEdit">
                </router-link>
            </div>
            <img src="../../assets/mywife.jpg" alt="">
        </div>
        <div class="title" v-if="!inRecycleBin && !isStatistics">
            <router-link :to="{ path: '/create', query: {index: this.index}}">{{totalTitle}}</router-link>
        </div>
        <div class="title" v-else>{{totalTitle}}</div>
        <div class="data">
            <div class="quest-id">id:{{questionId}}</div>
            <div class="quest-btn" v-if="!inRecycleBin">
                <router-link :to="{ path: '/usedquestion', query: {index: this.index}}" class="btn" title="问卷投放"
                    @mouseover="changeReclaim" @mouseleave="backReclaim" @click="issue">
                    <img :src="reclaimImg" alt="">
                </router-link>
                <!-- <a href="#" class="btn" title="问卷投放" @mouseover="changeReclaim" @mouseleave="backReclaim" @click="issue"><img
                        :src="reclaimImg" alt=""></a> -->
                <router-link :to="{ path: '/statistics', query: {index: this.index}}" class="btn" title="统计"
                    @mouseover="changeStatistics" @mouseleave="backStatistics" @click="toStatistics">
                    <img :src="statisticsImg" alt="">
                </router-link>
                <!-- <a href="#" class="btn" title="统计" @mouseover="changeStatistics" @mouseleave="backStatistics"><img
                        :src="statisticsImg" alt=""></a> -->
                <div class="btn" title="放入回收站" @click="intoRecycleBin" @mouseover="changeDelete"
                    @mouseleave="backDelete"><img :src="deleteImg" alt=""></div>
            </div>
            <div class="quest-btn" v-else>
                <div class="btn" title="恢复" @click="restore" @mouseover="changeRestore" @mouseleave="backRestore"><img
                        :src="restoreImg" alt=""></div>
                <div class="btn" title="彻底删除" @click="deleteQuestionnaire" @mouseover="changeDelete"
                    @mouseleave="backDelete"><img :src="deleteImg" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../store'
    import {
        is_recycle,
        issue,
        getStatistical
    } from '@/util/apis'
import { reactive } from '@vue/reactivity'
    export default {
        props: ['index'],
        data() {
            return {
                reclaimImg: require('../../assets/reclaim.png'),
                statisticsImg: require('../../assets/statistics.png'),
                deleteImg: require('../../assets/delete.png'),
                restoreImg: require('../../assets/restore.png'),
                editImg: require('../../assets/edit.png')
            }
        },
        methods: {
            toStatistics() {
                this.getIndex()
                let params = {
                    id: store.state.question[this.index].id
                }
                getStatistical(params).then((response) => {
                    store.state.count = response.message[0].count
                    store.state.getAnswers = response.message[0].answers
                    sessionStorage.setItem('count', response.message[0].count)
                    reactive(sessionStorage.getItem('count'))
                    sessionStorage.setItem('getAnswers', JSON.stringify(response.message[0].answers))
                    reactive(sessionStorage.getItem('getAnswers'))
                }).catch((error) => {
                    console.log(error);
                })
            },
            issue() {
                this.getIndex()
                let options = [];
                for (let i = 0; i < store.state.question[this.index].questions.length; i++) {
                    let option = {
                        id: store.state.question[this.index].questions[i].qid,
                        questions: store.state.question[this.index].questions[i].options
                    }
                    options.push(option);
                }
                if (!store.state.question[this.index].issue) {
                    let params = {
                        id: this.$store.state.question[this.index].id,
                        options: options,
                        index: this.index
                    }
                    issue(params).then((response) => {
                        console.log(response)
                        store.state.question[this.index].issue = true
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            },
            getIndex() {
                sessionStorage.setItem('index', this.index)
            },
            intoRecycleBin() {
                this.$emit('pushIndex', this.index, true)
            },
            restore() {
                store.commit('intoMineQuestion', this.index)
                // 恢复
                let params = {
                    username: sessionStorage.getItem('username'),
                    id: this.$store.state.question[this.index].id,
                    inRecycleBin: '',
                }
                is_recycle(params).then((response) => {
                    console.log(response)
                }).catch((error) => {
                    console.log(error)
                })
            },
            deleteQuestionnaire() {
                this.$emit('pushIndex', this.index, true)
            },
            changeReclaim() {
                this.reclaimImg = require('../../assets/reclaimHover.png')
            },
            backReclaim() {
                this.reclaimImg = require('../../assets/reclaim.png')
            },
            changeStatistics() {
                this.statisticsImg = require('../../assets/statisticsHover.png')
            },
            backStatistics() {
                this.statisticsImg = require('../../assets/statistics.png')
            },
            changeDelete() {
                this.deleteImg = require('../../assets/deleteHover.png')
            },
            backDelete() {
                this.deleteImg = require('../../assets/delete.png')
            },
            changeRestore() {
                this.restoreImg = require('../../assets/restoreHover.png')
            },
            backRestore() {
                this.restoreImg = require('../../assets/restore.png')
            },
            changeEdit() {
                this.editImg = require('../../assets/editHover.png')
            },
            backEdit() {
                this.editImg = require('../../assets/edit.png')
            }
        },
        computed: {
            inRecycleBin() {
                return store.state.question[this.index].inRecycleBin
            },
            totalTitle() {
                return store.state.question[this.index].totalTitle
            },
            questionId() {
                return store.state.question[this.index].id
            },
            isStatistics() {
                return store.state.question[this.index].issue
            }
        }
    }
</script>

<style scoped>
    button {
        border: none;
        background-color: transparent;
        outline: none;
    }

    a {
        text-decoration: none;
        outline: none;
        color: #fff;
    }

    a:hover {
        color: #4187f6;
    }

    .questionnaire {
        position: relative;
        width: 230px;
        height: 220px;
        margin: 10px;
        background-size: cover;
        background-color: #2b343b;
        border-radius: .7rem;
        box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
        overflow: hidden;
        transition: all .5s;
    }

    .questionnaire:hover {
        box-shadow: 1px 4px 10px rgb(0 0 0 / 30%);
    }

    .img {
        position: absolute;
        width: 100%;
        height: 150px;
        overflow: hidden;
        z-index: 2;
    }

    .edit {
        position: absolute;
        width: 100px;
        height: 150px;
        bottom: -100px;
        right: -100px;
        z-index: 3;
        background-color: #2b343b;
        opacity: .8;
        transform: rotate(62deg) translate3d(40%, 0%, 0);
        transition: all .5s;
    }

    .questionnaire:hover .edit {
        right: -10px;
        bottom: -60px;
    }

    .edit-btn {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        top: 30%;
        left: 10%;
        cursor: pointer;
        transform: rotate(-62deg);
    }

    .img>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
    }

    .title {
        position: absolute;
        width: 100%;
        height: 30px;
        top: 150px;
        padding-left: 10px;
        color: #fff;
        font-size: 1rem;
        line-height: 30px;
        border-bottom: 1.5px solid #999;
        z-index: 2;
    }

    .title::before {
        content: '';
        position: absolute;
        width: 0px;
        height: 1.5px;
        background-color: #4187f6;
        left: 0px;
        bottom: -1px;
        z-index: 3;
        transition: width .5s;
    }

    .questionnaire:hover .title::before {
        width: 100%;
    }

    .data {
        position: absolute;
        width: 100%;
        height: 40px;
        top: 180px;
        overflow: hidden;
    }

    .quest-id {
        position: absolute;
        width: 100%;
        height: 40px;
        top: 0;
        left: 0;
        opacity: 1;
        line-height: 40px;
        font-size: 1rem;
        padding-left: 10px;
        color: #aaa;
        transition: all .5s;
    }

    .quest-btn {
        display: flex;
        position: absolute;
        width: 100%;
        height: 40px;
        top: 40px;
        left: 0;
        opacity: 1;
        transition: all .3s;
        justify-content: space-evenly;
        align-items: center;
    }

    .questionnaire:hover .quest-id {
        top: -40px;
        opacity: 0;
    }

    .questionnaire:hover .quest-btn {
        top: 0;
    }

    .btn {
        display: block;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .btn>img,
    .edit-btn>img {
        width: 100%;
        height: 100%;
    }
</style>